// Show_IN JS !!

function draw(){
$.get("show_in.php", function(a){
	$("#pr").append(a);
	
	
	})
	
}
$(document).ready(function(){
	$("#b").click(function(){
	$("#box").toggle();
	
	$("#act").click(function(){
	var a = $("input").val()
	$("img").css({"-webkit-filter": "blur("+ a + "px)", "z-index" : "-5"})
	})
	})
	
	$("#sepia").click(function(){
	$("#box").toggle();
	$("#act").click(function(){
	var a = $("input").val();
	$("img").css({"-webkit-filter": "sepia("+ a + "%)", "z-index" : "-5"})
	})
	})
	
	$("#gray").click(function(){
	$("#box").toggle();
	$("#act").click(function(){;
	var a = $("input").val()
	$("img").css({"-webkit-filter:": "grayscale("+ a + "%)", "z-index" : "-5"})
	})
	})
	
	$("#bright").click(function(){
	$("#box").toggle();
	$("#act").click(function(){
	var a = $("input").val();
	$("img").css({"-webkit-filter": "brightness("+ a / 100 + ")", "z-index" : "-5"})
	})
	})
	
	$("#sat").click(function(){
	$("#box").toggle();
	$("#act").click(function(){
	var a = $("input").val()
	$("img").css({"-webkit-filter": "saturate("+ a + "%)", "z-index" : "-5"})
	})
	})
	
	$("#hue").click(function(){
	$("#box").toggle();
	$("#act").click(function(){;
	var a = $("input").val();
	$("img").css({"-webkit-filter": "hue-rotate("+ a + "deg)", "z-index" : "-5"})
	})
	})
	
	$("#cont").click(function(){
	$("#box").toggle();
	$("#act").click(function(){
	var a = $("input").val();
	$("img").css({"-webkit-filter": "contrast("+ a + "%)", "z-index" : "-5"})
	})
	})
	
	$("#inv").click(function(){
	$("#box").toggle();
	$("#act").click(function(){
	var a = $("input").val();
	$("img").css({"-webkit-filter": "invert("+ a + "%)", "z-index" : "-5"})
	})
	})
	})
draw();






